<template>
  <!-- 校区状态数据模块 -->
  <el-row :gutter="16" class="data-row">
    <el-col :span="24">
      <el-card class="data-card" shadow="never">
        <div slot="header" class="card-header">
          <div class="header-left">
            <i class="el-icon-s-grid" />
            <span>校区状态数据</span>
          </div>
          <div class="header-right">
            <el-select v-model="currentBrand" placeholder="请选择品牌" size="small" style="width: 120px; margin-right: 8px;" @change="onBrandChange">
              <el-option label="全部品牌" value="" />
              <el-option v-for="item in brandOptions" :key="item.enCode" :label="item.fullName" :value="item.enCode" />
            </el-select>

            <el-button size="small" icon="el-icon-refresh" :loading="loading" @click="refreshData">刷新</el-button>
          </div>
        </div>
        <div v-loading="loading" class="table-container">
          <el-table :data="tableData.slice(0, 5)" size="small" stripe :row-class-name="getRowClassName" class="report-table adaptive-table">
            <el-table-column prop="regionName" label="区域名称" min-width="140" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <div class="region-cell">
                  <i class="el-icon-office-building" style="color: #409eff; margin-right: 8px;" />
                  <span class="region-name">{{ scope.row.regionName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="normalRate" label="正常运营占比" min-width="120" align="center">
              <template slot-scope="scope">
                <div class="normal-rate-cell" :class="{ 'rate-error': isInvalidRate(scope.row.normalRate) }">
                  <!-- 进度条容器 -->
                  <div class="progress-container">
                    <el-progress :percentage="getNormalizedRate(scope.row.normalRate)" :stroke-width="6" :show-text="false" :color="getRateProgressColor(scope.row.normalRate)" :status="getRateStatus(scope.row.normalRate)" class="rate-progress" size="mini" />
                  </div>
                  <!-- 百分比文本 -->
                  <div class="rate-text-container">
                    <span class="rate-percentage" :class="getRateTextClass(scope.row.normalRate)">
                      {{ formatRateText(scope.row.normalRate) }}
                    </span>
                    <span v-if="scope.row.totalCount === 0" class="rate-note">无数据</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="totalCount" label="总数" min-width="80" align="center">
              <template slot-scope="scope">
                <span class="data-info">{{ scope.row.totalCount }}</span>
              </template>
            </el-table-column>
            <!-- 动态生成状态列 -->
            <el-table-column v-for="status in statusOptions" :key="status.enCode" :prop="getStatusCountProp(status.enCode)" :label="status.fullName" min-width="80" align="center">
              <template slot-scope="scope">
                <div class="status-cell">
                  <span :class="getStatusClass(status.enCode)">
                    <i :class="getStatusIcon(status.enCode)" class="status-icon" />
                    {{ scope.row[getStatusCountProp(status.enCode)] || 0 }}
                  </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { getCampusOperationData } from '@/api/report/branch'

export default {
  name: 'CampusStatusReport',
  props: {
    // 管理区域选项
    managementAreaOptions: {
      type: Array,
      default: () => []
    },
    // 校区状态选项
    statusOptions: {
      type: Array,
      default: () => []
    },
    // 品牌选项
    brandOptions: {
      type: Array,
      default: () => []
    },
    // 当前选中的品牌
    selectedBrand: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentBrand: this.selectedBrand || '',
      loading: false,

      campusStatusData: [],
      campusStatusFilter: {
        brand: this.selectedBrand || ''
      }
    }
  },
  computed: {
    tableData() {
      return this.campusStatusData || []
    }
  },
  watch: {
    selectedBrand: {
      handler(newVal) {
        this.currentBrand = newVal
        this.campusStatusFilter.brand = newVal
        this.loadCampusStatusData()
      },
      immediate: false
    },
    managementAreaOptions: {
      handler() {
        if (this.managementAreaOptions.length > 0) {
          this.loadCampusStatusData()
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.loadCampusStatusData()
  },
  methods: {
    // 加载校区状态数据
    async loadCampusStatusData() {
      this.loading = true

      try {
        // 构建查询参数，包含品牌筛选
        const params = {}

        // 添加品牌筛选参数 - 空值表示全部品牌
        if (this.campusStatusFilter.brand && this.campusStatusFilter.brand !== '') {
          params.brand = this.campusStatusFilter.brand
        }

        const res = await getCampusOperationData(params)
        const data = res.data || {}

        // 校区状态数据加载成功
        this.updateCampusStatusData(data)

        // 通知父组件数据已更新
        this.$emit('data-updated', this.campusStatusData)
      } catch (error) {
        this.$message.error('校区状态数据加载失败')
        console.error('校区状态数据加载错误:', error)
      } finally {
        this.loading = false
      }
    },

    // 更新校区状态数据
    updateCampusStatusData(data) {
      const companyStats = data.companyStatistics || []
      const crossStats = data.crossStatistics || []

      // 先按排序规则对管理区域选项进行排序
      const sortedRegions = this.sortRegionOptions(this.managementAreaOptions)

      this.campusStatusData = sortedRegions.map(region => {
        // 直接使用管理区域的fullName作为公司名称进行匹配
        const companyName = region.fullName

        const regionData = crossStats.filter(item => item.companyName === companyName)
        const regionStat = companyStats.find(item => item.companyName === companyName)

        const row = {
          regionName: region.fullName,
          regionCode: region.enCode,
          totalCount: regionStat ? regionStat.count : 0
        }

        // 动态初始化所有状态的计数
        this.statusOptions.forEach(status => {
          row[this.getStatusCountProp(status.enCode)] = 0
        })

        // 动态填充各状态数据
        regionData.forEach(item => {
          const statusProp = this.getStatusCountProp(item.statusValue)
          if (row.hasOwnProperty(statusProp)) {
            row[statusProp] = item.count
          }
        })

        // 计算正常运营占比：正常数/总数
        const normalCount = row[this.getStatusCountProp('normal')] || 0
        row.normalRate = row.totalCount > 0 ? Math.round((normalCount / row.totalCount) * 100) : 0

        return row
      })

      // 计算并添加总计行
      const totalRow = {
        regionName: '总计',
        regionCode: 'TOTAL',
        totalCount: 0,
        normalRate: 0
      }

      // 动态初始化所有状态的总计数量
      this.statusOptions.forEach(status => {
        totalRow[this.getStatusCountProp(status.enCode)] = 0
      })

      // 累加所有区域的数据
      this.campusStatusData.forEach(row => {
        totalRow.totalCount += row.totalCount

        // 累加各状态数量
        this.statusOptions.forEach(status => {
          const statusProp = this.getStatusCountProp(status.enCode)
          totalRow[statusProp] += row[statusProp] || 0
        })
      })

      // 计算总体正常运营占比：总正常数量 / 总数量
      const totalNormalCount = totalRow[this.getStatusCountProp('normal')] || 0
      totalRow.normalRate = totalRow.totalCount > 0 ? Math.round((totalNormalCount / totalRow.totalCount) * 100) : 0

      // 将总计行添加到数据末尾
      this.campusStatusData.push(totalRow)

      // 计算校区总数指标并发送给父组件
      this.calculateCampusMetrics()
    },

    // 计算校区总数指标
    calculateCampusMetrics() {
      // 计算校区总数（基于真实数据）
      const totalCampus = this.campusStatusData.reduce((sum, item) => {
        // 排除总计行
        if (item.regionCode !== 'TOTAL') {
          return sum + item.totalCount
        }
        return sum
      }, 0)

      // 模拟增长率（-10% 到 +10%）
      const campusGrowthRate = Math.floor(Math.random() * 20) - 10

      // 通过事件发送指标数据给父组件
      this.$emit('data-updated', {
        totalCampus,
        campusGrowthRate,
        campusStatusData: this.campusStatusData
      })
    },

    // 获取状态计数属性名
    getStatusCountProp(statusCode) {
      return `${statusCode}Count`
    },

    // 获取状态标签类型 - 根据新的状态定义
    getStatusTagType(statusCode) {
      const typeMap = {
        // 正常运营 - 绿色
        normal: 'success',
        Normal: 'success',
        // 筹备中 - 蓝色
        preparation: 'primary',
        Preparation: 'primary',
        // 暂停营业 - 橙色
        suspended: 'warning',
        Suspended: 'warning',
        // 已闭校 - 橙色
        close: 'warning',
        Close: 'warning',
        // 待续费 - 红色
        expires: 'danger',
        Expires: 'danger',
        // 其他状态 - 灰色
        other: '',
        Other: ''
      }
      return typeMap[statusCode] || ''
    },

    // 获取状态标签自定义样式类
    getStatusTagClass(statusCode) {
      const classMap = {
        // 暂时不需要自定义样式类
      }
      return classMap[statusCode] || ''
    },

    // 获取状态标签效果
    getStatusTagEffect(statusCode) {
      // 重要状态使用深色效果，其他使用浅色效果
      const darkEffectStatuses = ['normal', 'Normal', 'expires', 'Expires']
      return darkEffectStatuses.includes(statusCode) ? 'dark' : 'light'
    },

    // 获取状态样式类
    /**
     * 获取状态对应的样式类（颜色设计遵循字面含义）
     *
     * 设计原则：
     * - 正常（normal）：绿色（data-success），代表健康与通过
     * - 筹备（preparation）：蓝色（data-info），代表信息提示与进行中
     * - 待续费（expires）：橙色（data-warning），代表需要关注与提醒
     * - 暂停（suspended）：橙色（data-warning），代表警示状态但非致命
     * - 闭校（close）：红色（data-danger），代表终止与严重告警
     * - 其他（other）：蓝色（data-info），统一作为一般信息类
     *
     * 参数说明：
     * - statusCode：字符串，校区状态代码（可能存在大小写差异，如 normal/Normal）
     * 返回值：
     * - string，对应的样式类名（用于结合全局样式渲染颜色）
     */
    getStatusClass(statusCode) {
      const classMap = {
        // 正常运营：绿色（成功样式）
        normal: 'data-success',
        Normal: 'data-success',

        // 筹备中：蓝色（信息样式）
        preparation: 'data-primary',
        Preparation: 'data-primary',

        // 待续费：橙色（警告样式）
        expires: 'data-warning',
        Expires: 'data-warning',

        // 暂停营业：橙色（警告样式）
        suspended: 'data-danger',
        Suspended: 'data-danger',

        // 已闭校：红色（危险样式）
        close: '',
        Close: '',

        // 其他状态：蓝色（信息样式）
        other: 'data-primary',
        Other: 'data-primary'
      }
      return classMap[statusCode] || 'data-info'
    },

    // 获取状态图标
    getStatusIcon(statusCode) {
      const iconMap = {
        // 正常运营 - 成功图标
        normal: 'el-icon-success',
        Normal: 'el-icon-success',
        // 筹备中 - 时钟图标
        preparation: 'el-icon-time',
        Preparation: 'el-icon-time',
        // 暂停营业 - 暂停图标
        suspended: 'el-icon-video-pause',
        Suspended: 'el-icon-video-pause',
        // 已闭校 - 圆形关闭图标
        close: 'el-icon-circle-close',
        Close: 'el-icon-circle-close',
        // 待续费 - 警告图标
        expires: 'el-icon-warning',
        Expires: 'el-icon-warning',
        // 其他状态 - 信息图标
        other: 'el-icon-info',
        Other: 'el-icon-info'
      }
      return iconMap[statusCode] || 'el-icon-info'
    },

    // 获取进度条颜色（保留原方法以兼容其他地方使用）
    getProgressColor(percentage) {
      if (percentage >= 80) return '#67c23a'
      if (percentage >= 60) return '#e6a23c'
      return '#f56c6c'
    },

    // 优化后的进度条颜色获取方法
    getRateProgressColor(rate) {
      if (this.isInvalidRate(rate)) return '#dcdfe6'
      if (rate >= 90) return '#67c23a' // 优秀：绿色
      if (rate >= 80) return '#95d475' // 良好：浅绿色
      if (rate >= 60) return '#e6a23c' // 一般：橙色
      if (rate >= 40) return '#f78989' // 较差：浅红色
      return '#f56c6c' // 很差：红色
    },

    // 获取进度条状态
    getRateStatus(rate) {
      if (this.isInvalidRate(rate)) return 'exception'
      if (rate >= 80) return 'success'
      if (rate >= 60) return null
      return 'exception'
    },

    // 检查是否为无效的正常运营占比
    isInvalidRate(rate) {
      return rate == null || rate === undefined || isNaN(rate) || rate < 0 || rate > 100
    },

    // 获取标准化的正常运营占比（确保在0-100范围内）
    getNormalizedRate(rate) {
      if (this.isInvalidRate(rate)) return 0
      return Math.max(0, Math.min(100, rate))
    },

    // 格式化正常运营占比文本
    formatRateText(rate) {
      if (this.isInvalidRate(rate)) return '--'
      return `${rate}%`
    },

    // 获取正常运营占比文本样式类
    getRateTextClass(rate) {
      if (this.isInvalidRate(rate)) return 'rate-invalid'
      if (rate >= 90) return 'rate-excellent'
      if (rate >= 80) return 'rate-good'
      if (rate >= 60) return 'rate-normal'
      if (rate >= 40) return 'rate-poor'
      return 'rate-bad'
    },

    // 获取行类名
    getRowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
    },

    // 刷新数据
    refreshData() {
      this.loadCampusStatusData()
      this.$emit('refresh')
    },

    // 品牌选择改变
    onBrandChange(brand) {
      this.currentBrand = brand
      this.campusStatusFilter.brand = brand
      this.loadCampusStatusData()
      this.$emit('brand-change', brand)
    },

    // 获取区域排序值
    getRegionSort(region) {
      if (!region) return 999
      return region.sortCode || 999
    },

    // 对管理区域选项进行排序
    sortRegionOptions(regions) {
      if (!regions || !Array.isArray(regions)) return []

      return [...regions].sort((a, b) => {
        const sortA = this.getRegionSort(a)
        const sortB = this.getRegionSort(b)

        return sortA - sortB
      })
    }
  }
}
</script>

<style scoped>
@import './shared-table-styles.scss';

/* 进度条容器宽度调整（组件级覆盖）
 * 目的：确保“正常运营占比”列中的进度条宽度足够展示效果
 * 说明：
 * - 使用更具体的选择器在本组件内覆盖共享样式，避免影响其他报表组件
 * - 固定宽度为 140px，并设置最小宽度与最大宽度，避免被共享样式中的 max-width:120px 限制
 */
.normal-rate-cell .progress-container {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}

/* 让进度条填满容器宽度 */
.normal-rate-cell .rate-progress {
  width: 100%;
}
</style>
